<template>
  <div v-if="!showJz">
    <qkxl-num :kqxlNum="kqxlNum" :kqxlList="kqxlList" :selQk="selQk"></qkxl-num>
    <ck-num
      class="normal"
      :cqxlNum="cqxlNum"
      :cqxlList="cqxlList"
      :selQk="selQk"
    ></ck-num>
    <hkxl-num
      class="normal"
      :hkxlNum="hkxlNum"
      :hkxlList="hkxlList"
      :selQk="selQk"
    ></hkxl-num>
    <jkxl-num
      class="normal"
      :jkxlNum="jkxlNum"
      :jkxlList="jkxlList"
      :selQk="selQk"
    ></jkxl-num>
<!--    <div class="flex-row-center-center export-style" @click="exportData">-->
<!--      <a>导出以上事故数据</a>-->
<!--    </div>-->
    <Modal v-model="showModal">
      <div>
        <div v-if="selQk == '整体'">
          <table :data="tableDataXL" :columns="column1"></table>
          <table :data="tableDataCK" :columns="column2"></table>
          <table :data="tableDataHK" :columns="column3"></table>
          <table :data="tableDataJK" :columns="column8"></table>
        </div>
        <div v-else>
          <table :data="tableDataXL" :columns="column4"></table>
          <table :data="tableDataCK" :columns="column5"></table>
          <table :data="tableDataHK" :columns="column6"></table>
          <table :data="tableDataJK" :columns="column7"></table>
        </div>
      </div>
    </Modal>
  </div>
  <div v-else>
    <qkxl-table
      :kqxlNum="kqxlNum"
      :kqxlList="kqxlList"
      :curJz="jzId"
    ></qkxl-table>
    <ck-table
      class="normal"
      :cqxlNum="cqxlNum"
      :cqxlList="cqxlList"
      :curJz="jzId"
    ></ck-table>
    <hkxl-table
      class="normal"
      :hkxlNum="hkxlNum"
      :hkxlList="hkxlList"
      :curJz="jzId"
    ></hkxl-table>
    <jkxl-table
      class="normal"
      :jkxlNum="jkxlNum"
      :jkxlList="jkxlList"
      :curJz="jzId"
    ></jkxl-table>
  </div>
</template>
<script>
import qkxlNum from "@/components/index/rightside/qkxlNum";
import ckNum from "@/components/index/rightside/ckNum";
import hkxlNum from "@/components/index/rightside/hkxlNum";
import qkxlTable from "@/components/index/rightside/qkxlTable";
import ckTable from "@/components/index/rightside/ckTable";
import hkxlTable from "@/components/index/rightside/hkxlTable";
import jkxlNum from "@/components/index/rightside/jkxlNum"
import jkxlTable from "@/components/index/rightside/jkxlTable"
export default {
  components: {
    qkxlNum,
    ckNum,
    hkxlNum,
    qkxlTable,
    ckTable,
    hkxlTable,
    jkxlNum,
    jkxlTable
  },
  data() {
    return {
      showModal: false,
      column1: [
        { title: "气库名称", key: "气库名称" },
        { title: "地表微泄漏数量", key: "数量" },
      ],
      column2: [
        { title: "气库名称", key: "气库名称" },
        { title: "连通性数量", key: "数量" },
      ],
      column3: [
        { title: "气库名称", key: "气库名称" },
        { title: "环空泄漏数量", key: "数量" },
      ],
      column8: [
        { title: "气库名称", key: "气库名称" },
        { title: "井口泄漏数量", key: "数量" },
      ],
      column4: [
        { title: "井组名称", key: "井组名称" },
        { title: "地表微泄漏数量", key: "数量" },
      ],
      column5: [
        { title: "井组名称", key: "井组名称" },
        { title: "连通性数量", key: "数量" },
      ],
      column6: [
        { title: "井组名称", key: "井组名称" },
        { title: "环空泄漏数量", key: "数量" },
      ],
      column7: [
        { title: "井组名称", key: "井组名称" },
        { title: "井口泄漏数量", key: "数量" },
      ],
      tableDataXL: [],
      tableDataCK: [],
      tableDataHK: [],
      tableDataJK:[]
    };
  },
  props: {
    selQk: String,
    showJz: Boolean,
    kqxlNum: Number,
    cqxlNum: Number,
    hkxlNum: Number,
    kqxlList: Array,
    cqxlList: Array,
    hkxlList: Array,
    jzId: String,
    jkxlNum:Number,
    jkxlList:Array
  },
  watch: {},
  mounted() {
    console.log("88888888888", this.kqxlNum, this.kqxlList);
  },
  methods: {
    exportData() {
      let tableDataXL = [];
      let tableDataCK = [];
      let tableDataHK = [];
      let tableDataJK = []
      if (this.selQk == "整体") {
        this.kqxlList.forEach((item) => {
          let o = {}
          o["气库名称"] = item.name;
          o["数量"] = item.value;
          tableDataXL.push(o)
        });
        this.cqxlList.forEach((item) => {
          let o = {}
          o["气库名称"] = item.name;
          o["数量"] = item.value;
          tableDataCK.push(o)
        });
        this.hkxlList.forEach((item) => {
          let o ={}
          o["气库名称"] = item.name;
          o["数量"] = item.value;
          tableDataHK.push(o)
        });
        this.jkxlList.forEach((item) => {
          let o = {}
          o["井组名称"] = item.name
          o["数量"] = item.value
          tableDataJK.push(o)
        })
      } else {
        this.kqxlList.forEach((item) => {
          let o = {}
          o["井组名称"] = item.name;
          o["数量"] = item.value;
          tableDataXL.push(o)
        });
        this.cqxlList.forEach((item) => {
          let o ={}
          o["井组名称"] = item.name;
          o["数量"] = item.value;
          tableDataCK.push(o)
        });
        this.hkxlList.forEach((item) => {
          let o ={}
          o["井组名称"] = item.name;
          o["数量"] = item.value;
          tableDataHK.push(o)
        });
        this.jkxlList.forEach((item) => {
          let o = {}
          o["井组名称"] = item.name
          o["数量"] = item.value
          tableDataJK.push(o)
        })
      }

      let that = this;
      const sheet1 = this.XLSX.utils.json_to_sheet(tableDataXL);
      const sheet2 = this.XLSX.utils.json_to_sheet(tableDataCK);
      const sheet3 = this.XLSX.utils.json_to_sheet(tableDataHK);
      const sheet4 = this.XLSX.utils.json_to_sheet(tableDataJK);
      const wb = this.XLSX.utils.book_new();
      this.XLSX.utils.book_append_sheet(wb, sheet1, "气库泄漏");
      this.XLSX.utils.book_append_sheet(wb, sheet2, "连通性");
      this.XLSX.utils.book_append_sheet(wb, sheet3, "环空泄漏");
      this.XLSX.utils.book_append_sheet(wb, sheet4, "井口泄漏");
      const workbookBlob = this.workbook2blob(wb);
      this.openDownloadDialog(workbookBlob, `事故数据.xlsx`);
    },
    workbook2blob(workbook) {
      // 生成excel的配置项
      var wopts = {
        // 要生成的文件类型
        bookType: "xlsx",
        // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        bookSST: false,
        type: "binary",
      };
      var wbout = this.XLSX.write(workbook, wopts);
      // 将字符串转ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
      var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream",
      });
      return blob;
    },
    openDownloadDialog(blob, fileName) {
      if (typeof blob == "object" && blob instanceof Blob) {
        blob = URL.createObjectURL(blob); // 创建blob地址
      }
      var aLink = document.createElement("a");
      aLink.href = blob;
      // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
      aLink.download = fileName || "";
      var event;
      if (window.MouseEvent) event = new MouseEvent("click");
      //   移动端
      else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    },
  },
};
</script>
<style scoped>
.normal {
  margin-top: 32px;
}
.export-style {
  margin-top: 57px;
  line-height: 47px;
  color: #ffffff;
  font-size: 20px;
}
</style>